<template>
  <el-dialog :visible.sync="dialogVisible" append-to-body class="dialog-class">
    <div class="viewer-box">
      <img v-if="type==='image'" class="img" :src="url" width="100%">
      <video v-if="type==='video'" controls autoplay :src="url" width="100%" />
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: 'image'
    }
  },
  data() {
    return {}
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
<style scoped>
.viewer-box{
  display: flex;
  justify-content: center;
  align-items: center;
}
.img{
  width: auto;
  max-width: 100vw;
  max-height: 70vh;
}
</style>
